<template>
  <div>
    <div class="address">
      <a href="/pages/address/main?type=order" v-if="address.id === undefined">
        <div class="title text-center">+ 新建收货地址 <van-icon class="fr" name="arrow" /></div>
      </a>
      <van-cell
        v-else
        icon="location-o"
        is-link
        url="/pages/address/main?type=order"
      >
        <div slot="title" class="item">
          <div class="username">{{address.consignee}}</div>
          <div class="mobile">{{address.mobile}}</div>
          <div class="b"><van-tag v-if="address.is_default === 1" class="vtag" color="#ffe1e1" text-color="#ad0000">默认</van-tag>{{address.province_str}}{{address.city_str}}{{address.district_str}}{{address.address}}</div>
        </div>
      </van-cell>
    </div>
    <div class="cartList">
      <div v-for="(item,index) in goods" :key='index'>
        <div class="van-card__header">
          <div class="van-card__thumb" bind:tap="onClickThumb">
            <image
                :src="item.image"
                class="van-card__img thumb-class"
            />
          </div>
          <div class="van-card__content">
            <div class="van-card__title">{{item.title}}</div>
            <div class="van-card__desc desc-class">{{item.desc}}</div>
            <div class="van-card__bottom">
                <div class="van-card__price price-class"><van-icon name="balance-o" />{{item.price}}</div>
                <div class="van-card__num num-class">
                  X {{item.goods_number}}
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-dialog id="van-dialog" />
    <van-submit-bar
      class="Cart_bar"
      button-class="barTools"
      button-text="提交订单"
      @submit="onSubmit"
      button-type="primary"
    >
      <div slot="tip">
        您的收货地址不支持同城送, <text>修改地址</text>
      </div>
      <div class="bar__text">
        <span>合计：</span>
        <span class="bar__price"><van-icon name="balance-o" />{{allPrice}}</span>
      </div>
    </van-submit-bar>
    <van-popup class="hdoperateBomb" :overlay="true" @close="operateShow = false" :show="operateShow" >
      <div class="operate-txt hdbgImg">
        <van-icon class="text-gray ml-1 ft-20 hdclosed" name="cross" @click="operateShow = false" />
        <img src="../../../static/images/hy.png" class="hy" @click="thankYou">
        <img src="../../../static/images/hd.png" class="dialog" width="100%">
      </div>
    </van-popup>
  </div>
</template>
<script>
import {integral, views} from '../../utils/utils.js'
import Dialog from '../../../static/vant/dialog/dialog'
export default {
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 增加积分
      this.sharpePage(this.$root.$mp.query.id, 3)
    } else {
      this.sharpePage(this.$root.$mp.query.id, 4)
    }
    return {
      title: '订单',
      imageUrl: '/images/a.png',
      path: '/pages/home/main'
    }
  },
  onShow () {
    // 获取购物车 选中商品信息
    let _this = this
    let userDtr = wx.getStorageSync('userDtr')
    if (this.$root.$mp.query.type !== undefined) {
      wx.setStorageSync('type', this.$root.$mp.query.type)
    }

    if (this.$root.$mp.query.id !== undefined) {
      wx.setStorageSync('cartId', this.$root.$mp.query.id)
    }
    if (this.$root.$mp.query.number !== undefined) {
      wx.setStorageSync('number', this.$root.$mp.query.number)
    }
    if (wx.getStorageSync('type') === 'cart') {
      // 购物车
      wx.request({
        url: _this.apiUrl + 'api/order/cartcheck',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          'uid_str': userDtr,
          'cart_id': wx.getStorageSync('cartId')
        },
        success (res) {
          let data = res.data
          if (data.code === 200) {
            if (_this.$root.$mp.query.addressId !== undefined) {
              _this.getAddress(_this.$root.$mp.query.addressId)
            } else {
              _this.getAddress()
            }
            _this.goods = Object.assign([], data.data.goods)
            _this.allPrice = data.data.order_amount
            _this.user_integral = data.data.user_integral
          }
        },
        fail: () => {},
        complete: () => {}
      })
    } else {
      // 立即购买
      wx.request({
        url: _this.apiUrl + 'api/order/onecheck',
        data: {
          'uid_str': userDtr,
          'goods_id': wx.getStorageSync('cartId'),
          'goods_number': wx.getStorageSync('number')
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'GET',
        dataType: 'json',
        success: res => {
          let data = res.data
          if (data.code === 200) {
            if (_this.$root.$mp.query.addressId !== undefined) {
              _this.getAddress(_this.$root.$mp.query.addressId)
            } else {
              _this.getAddress('')
            }
            _this.goods = Object.assign({}, data.data.goods)
            _this.allPrice = data.data.order_amount
            _this.user_integral = data.data.user_integral
          }
        },
        fail: () => {},
        complete: () => {}
      })
    }
  },
  data () {
    return {
      address: {},
      stepperId: '',
      user_integral: 0,
      allPrice: 0,
      operateShow: false,
      goods: []
    }
  },
  components: {
  },
  computed: {},
  methods: {
    // 积分增加， 更新 分享、浏览 、转发数量，增加积分
    // type:share 更新分享数   views  更新浏览数 forwarding 更新转发数
    getIntegral (type = 2) {
      let _this = this
      let id = _this.$root.$mp.query.id
      // 增加积分
      integral(id, type)
      // 增加统计数量  views
      views(id, 'views')
    },
    // 1.签到 2.阅读文章 3.转发文章 4.分享小程序
    sharpePage (id, type = 3) {
      // 增加积分
      integral(id, type)
      // 增加统计数量 share
      views(id, 'share')
    },
    thankYou () {
      wx.redirectTo({
        url: '/pages/order_list/main'
      })
    },
    // 提交订单
    onSubmit () {
      let _this = this
      let userDtr = wx.getStorageSync('userDtr')
      if (this.user_integral < this.allPrice) {
        Dialog.alert({
          message: '积分不够!'
        }).then(() => {
          wx.navigateTo({ url: '/pages/home/main' })
        })
      } else {
        if (wx.getStorageSync('type') === 'cart') {
          // 购物车下单
          wx.request({
            url: _this.apiUrl + '/api/order/cartcreate',
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            data: {
              'uid_str': userDtr,
              'address_id': _this.address.id,
              'cart_id': wx.getStorageSync('cartId')
            },
            success (res) {
              let data = res.data
              if (data.code === 200) {
                _this.operateShow = true
              }
            },
            fail: () => {},
            complete: () => {}
          })
        } else {
          // 立即购买下单
          wx.request({
            url: _this.apiUrl + '/api/order/onecreate',
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            data: {
              'uid_str': userDtr,
              'address_id': _this.address.id,
              'goods_id': wx.getStorageSync('cartId'),
              'goods_number': wx.getStorageSync('number')
            },
            success (res) {
              let data = res.data
              if (data.code === 200) {
                Dialog.alert({
                  message: '恭喜您，提交成功，会有客服给您发货!'
                }).then(() => {
                  // wx.navigateTo({ url: '/pages/order_list/main' })
                })
              }
            },
            fail: () => {},
            complete: () => {}
          })
        }
      }
    },
    getAddress (id) {
      let userDtr = wx.getStorageSync('userDtr')
      let _this = this
      wx.request({
        url: this.apiUrl + 'api/address',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          'uid_str': userDtr
        },
        success (res) {
          let data = res.data
          if (data.code === 200) {
            let status = [0]
            data.data.forEach(element => {
              if (id === undefined) {
                if (element.is_default === 1) {
                  _this.address = Object.assign({}, element)
                  status.push(1)
                } else {
                  status.push(0)
                }
              } else {
                if (element.id === parseInt(id)) {
                  _this.address = Object.assign({}, element)
                  status.push(1)
                }
              }
            })
            // 没有默认地址，显示第一个
            if (status.indexOf(1) === -1) {
              _this.address = Object.assign({}, data.data[0])
            }
          }
        },
        fail: () => {},
        complete: () => {}
      })
    }
  },
  mounted () {}
}
</script>
<style scoped>
.cartList {
}
.address {
  width: 100%;
  z-index: 999;
}
.stepper {
  margin: 0 10px;
  float: right;
  margin: 5px 0;
}
.deletBtn{
  width: 65px;
  background-color: #f44;
  color: #fff;
  height: 100%;
  line-height: 80px;
  text-align: center;
  vertical-align: middle;
}
.barTools {
  color: #fff;
  background-color: #49a16f;
  border: 1px solid #49a16f;
}
.ck_box {
  margin:0 15px;
  display:inline-block;
}
.ck_boxItem {
  vertical-align: middle;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  left: 10px;
}
.van-submit-bar__bar--safe {
  padding-bottom:0;
}
.item .username {
  font-size: 16px;
  float: left;
}
.item .mobile {
  font-size: 14px;
  line-height: 18rpx;
  margin: 20rpx 0 0 20rpx;
  color: #b3b3b3;
  float: left;
}
.item .b {
  width: 90%;
  margin-top: 10rpx;
  line-height: 25px;
  float: left;
}
.bar__text {
  font-weight: 700;
  text-align: right;
  color: #49a16f;
  padding-right: 12px;
  margin-left: 15px;
}
.bar__price {
  display: inline-block;
}
.bar__price span {
  display: block
}
.van-card {
  position: relative;
  padding: 5px 15px;
  font-size: 12px;
  color: #333;
  background-color: #fafafa;
  box-sizing: border-box
}

.van-card__header {
  display: -webkit-flex;
  display: flex;
  padding: 5px 10px 5px 30px;
  position: relative;
}

.van-card__header--center {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center
}

.van-card__thumb {
  position: relative;
  width: 90px;
  height: 90px;
  margin-right: 10px;
  margin-left: 10px;
  -webkit-flex: none;
  flex: none
}

.van-card__thumb:empty {
  display: none
}

.van-card__img {
  width: 100%;
  height: 100%
}

.van-card__content {
  position: relative;
  min-width: 0;
  -webkit-flex: 1;
  flex: 1
}

.van-card__desc,
.van-card__title {
  word-break: break-all
}

.van-card__title {
  font-weight: 700;
  line-height: 16px
}

.van-card__desc {
  line-height: 20px;
  color: #7d7e80
}

.van-card__bottom {
  line-height: 20px
}

.van-card__num {
  display: inline-block;
  font-weight: 700;
  color: #49a16f;
  line-height: 40px;
  height: 40px;
  text-align: right;
}
.van-card__price {
  display: inline-block;
  font-weight: 700;
  color: #49a16f;
  line-height: 40px;
  height: 40px;
}
.van-card__origin-price {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  color: #7d7e80;
  text-decoration: line-through
}

.van-card__num {
  float: right
}

.van-card__tag {
  position: absolute;
  top: 2px;
  left: 0
}

.van-card__footer {
  width: 100%;
  text-align: right;
  -webkit-flex: none;
  flex: none
}
</style>
